
/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
*/
.scrollable {

  /* required settings */
  position:relative;
  overflow:hidden;
  width: 577px;
  height:142px;

  /* custom decorations */
  margin-bottom: 20px;
}

/*
  root element for scrollable items. Must be absolutely positioned
  and it should have a extremely large width to accomodate scrollable items.
  it's enough that you set the width and height for the root element and
  not for this element.
*/
.scrollable .items {
  /* this cannot be too large */
  width:20000em;
  position:absolute;
  clear:both;
}

.items div.section {
  float:left;
  width:680px;
}

/* single scrollable item */
.scrollable img {
  float:left;
  margin-right:5px;
  width: 140px;
  max-height: 140px;
/*
  width:128px;
  height:128px;
  */

  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}

/* active item */
.scrollable .active {
  border:2px solid #000;
  position:relative;
  cursor:default;
}


.scrollable .wraptocenter {
  height: 140px;
}